<template>
  <div>
    <div @click="changeMini" class="zoom-menu position-relative" :title="miniState == true ? 'large':'mini'">
      <!--<q-icon name="menu"/>-->
      <q-icon :name="miniState == true? 'fast_forward':'fast_rewind'"/>
      <div class="line"></div>
    </div>
    <!-- 暂不支持多级菜单 -->
    <q-list no-border link inset-delimiter color="tertiary"
            :class="'text-blue-grey-1 left-menu '+extClass"
            @mouseenter.native="mouseenter"
            @mouseleave.native="mouseleave">
      <q-item v-if="!item.disable"
              @click.native="showToggle(item)"
              v-for="item in menus" :key="item.id"
              :class="selected.oneMenu == (item.url + item.name) ? 'active' : ''">
        <div v-if="false" style="position: absolute;">
          <q-icon name="arrow_left" class="extIcon" style="position: absolute;font-size: 35px;left: -37px;height: 40px;top: -20px;color: #444"/>
        </div>
        <q-item-side v-if="!extClass" :icon="item.icon" :color="item.color"/>
        <q-item-main :label="item.name"/>
      </q-item>
    </q-list>
  </div>
</template>
<script>
  export default {
    props: ['miniState', 'extClass', 'showExtMenu', 'hideExtMenu', 'toggleMenu'],
    data() {
      return {
        extItem: {},
        selected: {oneMenu: '', subMenu: ''},
        menus: []
      }

    },
    methods: {
      //获取模块菜单
      getMenus(pid, menuList) {
        //设置页面菜单
        this.menus = menuList;

        //检测路由，新菜单模块，跳转到第1个
        let history = this.$router.history.current.path;
        let flag;
        menuList.forEach(item => {
          if (item.url == history) {
            flag = true;
            return false;
          }
        });
        //默认跳转到第一个菜单
        if (!flag && menuList[0]) {
          this.toPage(this.menus[0]);
        }
      },

      changeMini() {
        this.toggleMenu(this.miniState);
      },
      // 点击展开折叠菜单事件
      showToggle(menu) {
        //存储菜单选中状态
        this.$store.commit('menu/setCurrentLeftMenu', menu);

        this.selected.oneMenu = menu.url + menu.name;
        this.toPage(menu);
      },
      toPage(menu) {
        this.$router.push({path: menu.url});
        this.$root.$emit('menuChange', menu);
      },
      mouseleave() {
        if (this.hideExtMenu) {
          this.hideExtMenu();
        }
      },
      mouseenter() {
        if (this.showExtMenu) {
          this.showExtMenu();
        }
      },
    },
    mounted() {
      this.$root.$off('loadAppMenu').$on('loadAppMenu', (item) => {
        item = this.$store.state.menu.currTopMenu;
        this.getMenus(item.pid, item.subItems);
      });
    }
  }
</script>
